<template>
    <div class="channel-edit-container">
        <van-cell center :border="false">
            <div slot="title" class="channel-title">我的频道</div>
            <van-button type="danger" round plain size="mini" @click=" isEdit = !isEdit ">{{ isEdit ? '完成' : '编辑' }}</van-button>
        </van-cell>
        <!-- 频道的内容列表 -->
        <van-grid :gutter="10">
            <van-grid-item 
                :icon="(isEdit && index !== 0) ? 'clear' : '' " 
                class="grid-item"
                :class="{ 'active' : index === active }"
                v-for="(item,index) in userChannels" 
                :key="index"  
                :text="item.name" 
                @click="onChannelCLick(item,index)"
            />
            <!--
                动态绑定样式的思路：
                    1.父传子 :active="active",把激活的index传递给子组件
                    2.子组件通过 props:{ active:{ type:Number,required:true } },接收
                    3.同：class=" 'activeClass' index === active ",判断作用于那个元素
             -->
        </van-grid>
        <!-- 频道的内容列表 -->

        <van-cell :border="false">
            <div slot="title" class="channel-title">频道推荐</div>
            <div></div>
        </van-cell>
        <!-- 频道的内容列表 -->
        <van-grid :gutter="10">
            <van-grid-item class="grid-item" v-for="rChannel in recommendedChannel" :key="rChannel.id"  :text="rChannel.name" @click="onAdd(rChannel)" />
        </van-grid>
        <!-- 频道的内容列表 -->
    </div>
</template>

<script>
import { getAllChannels,addUserChannels,delUserChannels } from '@/api/channel'
import storage  from '@/utils/storage'
import { mapState } from 'vuex'
    export default {
        name:'channelEdit',
        props:{
            userChannels:{
                type: Array,
                required: true
            },
            active:{
                type: Number,
                required: true
            }
        },
        data() {
            return {
                allChannels:[], //全部频道数据
                isEdit:false, //判断是否处于编辑的状态
            }
        },
        methods: {
            async getAllChannelLists(){
                const { data } = await getAllChannels();
                this.allChannels = data.data.channels;
            },
            //添加我的频道
            async onAdd(rChannel){
                this.userChannels.push(rChannel)
                // 数据持久化的操作
                if(this.user){
                    // 用户已经登录的状态,此接口产生跨域问题
                    await addUserChannels({
                        channels:[
                            {
                                id: rChannel.id, seq: this.userChannels.length
                            }
                        ]
                    })
                }else{
                    // 用户未登录的状态
                    // 定义一个refresh_token key常量
                    storage.setToken('channel_token',this.userChannels);
                }
            },
            // 列表项被点击
            onChannelCLick(channel,index){
                if(this.isEdit && index != 0){
                    // 处于编辑状态，删除频道
                    // console.log("删除频道")
                    this.onRemoveChannel(channel,index);
                }else{
                    // 处于非编辑状态，切换频道
                   this.onSwitchChannel(index);
                }
            },
            // 删除我的频道
            async onRemoveChannel(channel,index){
                // 如果删除的频道是被激活的频道之前的频道
                if(index <= this.active){
                    this.$emit('switchChannel', this.active - 1)
                }
                this.userChannels.splice(index,1);

                // 数据持久化
                if(this.user){
                    console.log("用户已经登录")
                    // 持久化到线上
                    await delUserChannels(channel.id);
                }else{
                    // 持久化到本地
                    const TOKEN_KEY = 'channel_token';
                    storage.setToken(TOKEN_KEY,this.userChannels);
                }
            },
            //切换频道
            onSwitchChannel(index){
                // 子父组件之间通信
                // 关闭遮罩层
                this.$emit('switchChannel',index);
                // 切换频道
                this.$emit('closeChannelPopup');
            }
        },
        created() {
            this.getAllChannelLists();
        },
        computed:{
            ...mapState(['user']),
            recommendedChannel(){
                // 使用filter方法过滤相关的数据
                return this.allChannels.filter( allChannel => {
                    // 查找某个元素
                    return !this.userChannels.find( userChannel =>{
                        return userChannel.id === allChannel.id
                    })
                })
            }
        }
    }
</script>

<style lang="less" scoped>
.channel-edit-container{
    padding-top: 54px;
    .channel-title{
        font-size: 16px;
        color: #333;
    }
    .grid-item{
        width: 80px;
        height: 43px;
        /deep/.van-grid-item__content{
            background-color: #f4f5f6;
            position: relative;
            .van-grid-item__text{
                font-size: 14px;
                color: #222;
                margin-top: 0;
            }
        }
        
        /deep/.van-grid-item__icon{
            position: absolute;
            top: -5px;
            right: -5px;
            font-size: 20px;
            color: #ccc;
            z-index: 9999;
        }
        /deep/ &:first-child{
            .van-grid-item__icon{
                display: none;
            }
        }
    }

    .active{
        /deep/.van-grid-item__text{
            color: #ff0025 !important;
        }
    }
}
</style>